<template>
	<view class='my'>
		<!--头部背景-->
		<view class='my-header'>
			<view class="my-header-come">
				欢迎您！{{loginStatus?userInfo.nickName:'用户'}}
			</view>
		</view>
		<!--登录-->
		<view class="login-title">
			<image class='login-img' :src="loginStatus?userInfo.imgUrl:'../../static/img/recommend1.jpg'" mode=""></image>
			<view class="login-text" v-if="!loginStatus">
				<text>零售商城用户</text>
				<text>为您提供更好的服务请先登录</text>
			</view>
			<view class="login-text" v-else>
				<text>点击查看个人信息</text>
			</view>
			<button type="default" @tap="goLogin" v-if="!loginStatus">登录/注册</button>
			<button v-else @tap="goConfig">查看信息</button>
		</view>
		<view class="order">
			<view class="order-title" @tap="goOrder">
				<view class="order-title-lift">
					<image class="order-img" src="../../static/img/订单.png" mode=""></image>
					<text>我的订单</text>
				</view>
				<image class="order-img-right" src="../../static/img/向右箭头.png" mode=""></image>
			</view>
		</view>
		<view class="order">
			<view class="order-title" @tap="goPathList">
				<view class="order-title-lift">
					<image class="order-img add-img" src="../../static/img/编辑（收货地址）.png" mode=""></image>
					<text>收货地址</text>
				</view>
				<image class="order-img-right" src="../../static/img/向右箭头.png" mode=""></image>
			</view>
		</view>
		<view class="order">
			<view class="order-title" @tap="goCustomer">
				<view class="order-title-lift">
					<image class="order-img" src="../../static/img/客服.png" mode=""></image>
					<text>联系客服</text>
				</view>
				<image class="order-img-right" src="../../static/img/向右箭头.png" mode=""></image>
			</view>
		</view>
		<view class="user-set">
			<view class="order">
				<view class="order-title" @tap="goConfig">
					<view class="order-title-lift">
						<image class="order-img" src="../../static/img/个人设置.png"></image>
						<text>个人设置</text>
					</view>
					<image class="order-img-right" src="../../static/img/向右箭头.png" mode=""></image>
				</view>
			</view>
		</view>
		<Tabbar cureentPage='my'></Tabbar>
	</view>
</template>

<script setup>
	import Tabbar from '@/components/common/Tabbar.vue'
	import {
		userStore
	} from '@/store/user.js'
	import {
		storeToRefs
	} from 'pinia'
	const userListStore = userStore()
	const {
		loginStatus,
		token,
		userInfo
	} = storeToRefs(userListStore)
	const goConfig = () => {
		uni.navigateTo({
			url: '../my-config/my-config'
		})
	}
	const goPathList = () => {
		uni.navigateTo({
			url: '../my-path-list/my-path-list'
		})
	}
	const goOrder = () => {
		uni.navigateTo({
			url: '../my-order/my-order'
		})
	}
	const goLogin = () => {
		uni.navigateTo({
			url: '../test/test'
		})
	}
	const goCustomer = () => {
		uni.navigateTo({
			url: '../customer-service/customer-service'
		})
	}
</script>

<style scoped>
	.my {
		width: 100%;
		height: 1530rpx;
		background-color: #f8f8f8;
	}

	.my-header {
		background: url(../../static/img/bg.jpeg) no-repeat;
		width: 100%;
		height: 400rpx;
	}

	.my-header-come {
		position: absolute;
		top: 100rpx;
		left: 50rpx;
		font-size: 34rpx;
	}

	.login-title {
		position: relative;
		top: -100rpx;
		width: 710rpx;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx;
		background-color: #eaf5f5;
	}

	.login-text {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.login-title button {
		font-size: 32rpx;
		width: 200rpx;
		height: 80rpx;
		margin-right: 10rpx;
		border-radius: 20rpx;
		background-color: #aef5ff;
	}

	.login-img {
		width: 100rpx;
		height: 100rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 50%;
		margin-left: 5rpx;
		background-color: #FFFFFF;
	}

	.order {
		background-color: #FFFFFF;
		width: 710rpx;
		margin: 0 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.order-img {
		width: 65rpx;
		height: 65rpx;
		margin: 0 15rpx;
	}

	.add-img {
		width: 60rpx;
		height: 60rpx;
	}

	.order-img-right {
		width: 30rpx;
		height: 30rpx;
		margin-right: 30rpx;
	}

	.order-title {
		height: 150rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.order-title-lift {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user-set {
		margin-top: 50rpx;
	}
</style>